<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <form action="http:// xxx.com/register" id="registerForm" method="post">
    请输入用户名:<input type="text" name="username"><br>
    请输入密码:<input type="password" name="password"><br>
    请输入手机号:<input type="text" name="phoneNumber"><br>
    <button >提交</button>
  </form>
  <script>
    /*策略对象*/
    let strategies = {
      isNonEmpty: function (value, errorMsg) {
        if (value == '') {
          return errorMsg;
        }
      },
      minLength: function (value, length, errorMsg) {
        if (value.length < length) {
          return errorMsg;
        }
      },
      isMobile: function (value, errorMsg) {
        if (! /(^1[3|5|8][0-9]{9}$)/.test(value)) {
          return errorMsg;
        }
      }
    }
    /*Validator类*/
    let Validator = function () {
      this.cache = [];
    }

    Validator.prototype.add = function (dom, rules) {
      let self = this;
      for(let i = 0,rule; rule = rules[i++];) {
        (function(rule) {
          let strategyAry = rule.strategy.split(":")
          let errorMsg = rule.errorMsg;
          self.cache.push(function() {
            let strategy = strategyAry.shift();
            strategyAry.unshift(dom.value);
            strategyAry.push(errorMsg);
            return strategies[strategy].apply(dom,strategyAry);
          });
        })(rule)
      }
      // var ary = rule.split(":");      //把strategy和参数分开
      // this.cache.push(function () {    //把校验的步骤用空函数包装起来，并且放入cache
      //   var strategy = ary.shift();   //用户挑选的strategy
      //   ary.unshift(dom.value);       //把input的value添加进参数列表
      //   ary.push(errorMsg)            //把errorMsg添加进参数列表
      //   return strategies[strategy].apply(dom, ary)
      // })
    };

    Validator.prototype.start = function () {
      for (let i = 0, validatorFunc; validatorFunc = this.cache[i++];) {
        let errorMsg = validatorFunc()     //开始校验，并取得校验后的返回信息
        if (errorMsg) {                     //如果有确切的返回值，说明校验没有通过
          return errorMsg;
        }
      }
    }

    /*客户调用代码*/
    let registerForm = document.getElementById("registerForm");

    let validataFunc = function () {
      let validator = new Validator();
      /*添加校验规则*/
      validator.add(registerForm.username, [{
        strategy: 'isNonEmpty',
        errorMsg: '用户名不能为空'
      },{
        strategy: 'minLength:10',
        errorMsg: '用户名长度不能小于10'
      }]);
      validator.add(registerForm.password, [{
        strategy: 'isNonEmpty',
        errorMsg: '密码不能为空'
      },{
        strategy: 'minLength:6',
        errorMsg: '密码长度不能小于6位'
      }]);
      validator.add(registerForm.phoneNumber, [{
        strategy: 'isMobile',
        errorMsg: '手机格式不正确'
      }])
      let errorMsg = validator.start(); //获得校验结果
      return errorMsg;                  //返回校验结果
    }

    registerForm.onsubmit = function () {
      // var ck = function () {1
      let errorMsg = validataFunc();
      if (errorMsg) {
        alert(errorMsg);
        return false;   //阻止表单提交
      }
    }

    
  </script>
</body>

</html>